<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	
	<style type="text/css">
	body {
	 background: url("./img/index_bg.jpg") no-repeat;
	 background-size: 100%;
	}
	#center{
		width: 1200px;
		height: 500px;	
		margin-top:60px;
	}
	
	#hr1{
    *margin: 0;
    border: 0;
    color: gray;
    background-color: #8B7355; 
    height: 5px
	}
	#pic1{
	width: 120px;
	height: 130px;		
	}
	#pic2{
	width: 120px;
	height: 130px;		
	}
	#pic3{
	width: 120px;
	height: 200px;		
	}
	
	#fir_btn1{
	margin-top:25px;
	margin-left:80px;
	background-color:	248 248 255;
	opacity:0.6;
	border-radius: 40px;
	width: 250px;
	height: 60px;	
	}
	
	#fir_btn2{
	margin-top:50px;
	margin-left:80px;
	background-color:	248 248 255;
	opacity:0.6;
	border-radius: 40px;
	width: 250px;
	height: 60px;		
	}
	
	#_font{
	font-family:"仿宋";
	font-size: 25px;
	font-weight:500;
	color: black;
	}	
	
	.footer {
	text-align: center;
	margin-top: 70px;
	margin-bottom: 20px;
}
	</style>
  </head>
  
  
  <body>
  <div class="container">
    <div class="row" id="center">
    	<div  class="row">
    	   <div class="col-sm-offset-2 col-sm-3">
    	   		<img id="pic1" src="./img/si1.png">
    	   </div>
    	</div>
    	<hr id="hr1">
    	<div  class="row">
    	   <div class="col-sm-offset-4 col-sm-3">
    	   		<img id="pic2" src="./img/shi2.png">
    	   </div>
    	   <div class="col-sm-3">
    	   		<div>
    	   		 	<a href="./first.html" class="btn btn-default btn-lg active" role="button"  id="fir_btn1">
    	        		<p id="_font">进入网站</p>
    	       	 	</a>
    	   		</div>
    	        <div>
    	        	<a href="./Login.jsp" class="btn btn-default btn-lg active" role="button"  id="fir_btn2">
    	        		<p id="_font">登录</p>
    	       		 </a>
    	        </div>
    	   </div>
    	</div>
    	<div  class="row">
    	   <div class="col-sm-offset-3 col-sm-3">
    	   		<img id="pic3" src="./img/si2.png">
    	   </div>
    	</div>
	 </div>
    </div>
   
   <div class="footer">
		Copyright © 2020, <a href="./index.html">&#160&#160嗣食肆&#160</a>&#160All
		Rights Reserved
	</div>
	
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script>
		$(function(){
			$("#fir_btn1").hide();
			$("#fir_btn2").hide();
			$("#pic1").hide();
			$("#pic1").show(1000);
			$("#pic2").hide();
			$("#pic2").fadeIn(1500);
			$("#pic3").hide();
			$("#pic3").fadeIn(1500);
			$("#fir_btn1").show(1500);
			$("#fir_btn2").show(1500);
		});
		
		
		
	</script>
  </body>
</html>